/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* You can override the default Infima variables here. */
:root {
  --ifm-color-primary: #4a5568; /* slate-600 */
  --ifm-color-primary-dark: #2d3748; /* slate-700 */
  --ifm-color-primary-darker: #1a202c; /* slate-800 */
  --ifm-color-primary-darkest: #171923; /* slate-900 */
  --ifm-color-primary-light: #718096; /* slate-500 */
  --ifm-color-primary-lighter: #a0aec0; /* slate-400 */
  --ifm-color-primary-lightest: #cbd5e0; /* slate-300 */
  --ifm-color-primary-light-grey: #edf2f7; /* slate-100 */
  --ifm-color-primary-dark-grey: #e2e8f0; /* slate-200 */
  --ifm-background-color: #ffffff;
  --ifm-navbar-background-color: #f7fafc; /* slate-50 */
  --ifm-navbar-background-color-black-to-grey: black;
  --ifm-code-font-size: 95%;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.05);
  --ifm-font-family-base: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Remove external link icon from navbar items */
.navbar__item--no-external-icon svg {
  display: none;
}

/* Dark mode colors */
[data-theme='dark'] {
  --ifm-color-primary: #a0aec0; /* slate-400 */
  --ifm-color-primary-dark: #718096; /* slate-500 */
  --ifm-color-primary-darker: #4a5568; /* slate-600 */
  --ifm-color-primary-darkest: #2d3748; /* slate-700 */
  --ifm-color-primary-light: #cbd5e0; /* slate-300 */
  --ifm-color-primary-lighter: #e2e8f0; /* slate-200 */
  --ifm-color-primary-lightest: #edf2f7; /* slate-100 */
  --ifm-color-primary-light-grey: #2d3748; /* slate-800 */
  --ifm-color-primary-dark-grey: #252d3b; /* slate-900 */
  --ifm-background-color: #1a202c; /* slate-800 */
  --ifm-navbar-background-color: #171923; /* slate-900 */
  --ifm-navbar-background-color-black-to-grey: a0aec0;
  --docusaurus-highlighted-code-line-bg: rgba(255, 255, 255, 0.1);
}

/* Reduce header font sizes */
h1 {
  font-size: 1.8rem; /* Reduced from default 2.5rem */
  text-decoration: underline;
}

h2 {
  font-size: 1.5rem; /* Reduced from default 2rem */
}

h3 {
  font-size: 1.25rem; /* Reduced from default 1.5rem */
}

h4 {
  font-size: 1.125rem; /* Reduced from default 1.25rem */
}
